﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!--引用百度地图API-->
<style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
    }

    .iw_poi_title {
        color: #CC5522;
        font-size: 14px;
        font-weight: bold;
        overflow: hidden;
        padding-right: 13px;
        white-space: nowrap;
    }

    .iw_poi_content {
        font: 12px arial,sans-serif;
        overflow: visible;
        padding-top: 4px;
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script>

 


</script>

<div class="page-header">
    <div class="pull-left">
        <ol class="breadcrumb visible-sm visible-md visible-lg">
            <li><a href="index.html"><i class="icon fa fa-home"></i>主页</a></li>
            
        </ol>
    </div>

</div>
<div class="row" id="div_WeatherAndMap">
    
    <div class="col-md-8 col-xs-12">
        <div class="panel bk-widget bk-border-off bk-webkit-fix">
            <a class="panel-body bk-padding-off bk-opacity">
            @*<a class="panel-body bk-padding-off text-center bk-padding-15">*@
                <img src="@Url.Content("~/Assets/img/flat-sun.jpg")" alt="" style="width:100%" class="img-responsive">
            </a>
            <div class="panel-body bk-bg-primary text-center bk-padding-15">
                <div class="row">
                    <div class="col-xs-6 bk-vcenter">
                        <h4 class="bk-margin-off bk-docs-font-weight-300">
                            <i class="fa fa-map-marker"></i>
                            @ViewBag.ClientLocation

                        </h4>
                    </div>
                    <div class="col-xs-3 bk-vcenter">
                        <h1 class="bk-margin-off"> @ViewBag.temp</h1>
                    </div>
                    <div class="col-xs-3 bk-vcenter">
                        <h2 class="bk-margin-off"><i class="wi @ViewBag.Icon"></i></h2>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="hid_Latitude" value="" />
        <input type="hidden" id="hid_Longitude" value="" />

        <div class="panel bk-widget bk-border-off">
            <div class="panel-body text-center bk-padding-top-20 bk-wrapper bk-bg-white">
                <div id="dituContent" style="height:190px;color:#484848;"></div>
            </div>
            <div class="panel-body bk-padding-bottom-10 text-center bk-bg-white">
                <h3 class="bk-margin-off"><strong>Map</strong></h3>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-md-5 col-sm-5">
        <div class="panel bk-widget bk-border-off">
            <div class="panel-body text-left bk-bg-primary bk-fg-white bk-padding-top-10 bk-padding-bottom-10">
                <div class="row">
                    <div class="col-xs-4 bk-vcenter">
                        <div class="bk-avatar">
                            <img src="assets/img/avatar.jpg" alt="" class="img-circle bk-img-80 bk-border-white bk-border-3x">
                        </div>
                    </div>
                    <div class="col-xs-8 text-right bk-vcenter">
                        <h4 class="bk-margin-off">Hi wangyangyang</h4>
                        <small>软件科</small>
                        <div class="bk-margin-top-10">
                            <button type="button" class="bk-margin-5 btn btn-default btn-info">查看更多</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body bk-bg-white no-padding">
                <div class="todo-list">
                    <div class="header">我的代办</div>
                    <ul id="todo-2" class="todo-list-tasks ui-sortable">
                        <li>
                            <label class="custom-checkbox-item pull-left">
                                <input class="custom-checkbox" type="checkbox">
                                <span class="custom-checkbox-mark"></span>
                            </label>
                            <span class="desc">Add slider home to creative template</span>
                        </li>
                        <li>
                            <label class="custom-checkbox-item pull-left">
                                <input class="custom-checkbox" type="checkbox">
                                <span class="custom-checkbox-mark"></span>
                            </label>
                            <span class="desc">Change portfolio image with new animation</span>
                        </li>
                        <li>
                            <label class="custom-checkbox-item pull-left">
                                <input class="custom-checkbox" type="checkbox">
                                <span class="custom-checkbox-mark"></span>
                            </label>
                            <span class="desc">Fixed JavaScript problem for index page</span>
                        </li>
                    </ul>
                    <div class="header">已阅读的代办</div>
                    <ul class="completed"></ul>
                </div>
            </div>
            <div class="panel-body bk-padding-top-10">
                <div class="row text-center">
                    <a class="col-xs-4 bk-bg-very-light-gray bk-bg-darken bk-padding-top-10 bk-padding-bottom-10">
                        <i class="fa fa-envelope"></i><small> Message</small>
                    </a>
                    <a class="col-xs-4 bk-bg-very-light-gray bk-bg-darken bk-padding-top-10 bk-padding-bottom-10">
                        <i class="fa fa-comment-o"></i><small> Comment</small>
                    </a>
                    <a class="col-xs-4 bk-bg-very-light-gray bk-bg-darken bk-padding-top-10 bk-padding-bottom-10">
                        <i class="fa fa-bell-o"></i><small> Notification</small>
                    </a>
                </div>
            </div>
        </div>

        <div class="panel bk-widget bk-border-off bk-noradius">
            <div class="panel-heading bk-bg-primary">
                <div class="row">
                    <div class="col-xs-8 text-left bk-vcenter">
                        <h6 class="bk-margin-off">在线人员</h6>
                    </div>
                    <div class="col-xs-4 bk-vcenter text-right">
                        <i class="fa fa-users"></i>
                    </div>
                </div>
            </div>
            <div class="panel-body bk-bg-white bk-padding-off-top bk-padding-off-bottom">
                <div class="row">
                    <div class="col-xs-3 bk-vcenter text-center bk-padding-top-10 bk-padding-bottom-10">
                        <a href="#" class="bk-avatar">
                            <img src="assets/img/avatar.jpg" alt="" class="img-circle bk-img-60 bk-border-primary bk-border-2x bk-border-darken">
                        </a>
                    </div>
                    <div class="col-xs-9 bk-vcenter">
                        <h5 class="bk-fg-primary bk-margin-off-bottom">Michael</h5>
                        <p>
                            Nullam vitae arcu in leo molestie hendrerit at quis sem.
                        </p>
                    </div>
                </div>
                <div class="row">
                    <hr class="bk-margin-off">
                    <div class="col-xs-3 bk-vcenter text-center bk-padding-10">
                        <a href="#" class="bk-avatar">
                            <img src="@Url.Content("~/Assets/img/avatar.jpg")" alt="" class="img-circle bk-img-60 bk-border-warning bk-border-2x bk-border-darken">
                        </a>
                    </div>
                    <div class="col-xs-9 bk-vcenter">
                        <h5 class="bk-fg-warning bk-margin-off-bottom">
                            Jhason</h5>
                        <p>
                            In sit amet nunc non justo consequat pellentesque a vel nulla.
                        </p>
                    </div>
                </div>
                <div class="row">
                    <hr class="bk-margin-off">
                    <div class="col-xs-3 bk-vcenter text-center bk-padding-10">
                        <a href="#" class="bk-avatar">
                            <img src="@Url.Content("~/Assets/img/avatar.jpg")" alt="" class="img-circle bk-img-60 bk-border-success bk-border-2x bk-border-darken">
                        </a>
                    </div>
                    <div class="col-xs-9 bk-vcenter">
                        <h5 class="bk-fg-success bk-margin-off-bottom">Serlly</h5>
                        <p>
                            Morbi interdum posuere ultricies. Aliquam sit amet neque nisi. Etiam in iaculis lectus.
                        </p>
                    </div>
                </div>
                <div class="row">
                    <hr class="bk-margin-off">
                    <div class="col-xs-3 bk-vcenter text-center bk-padding-10">
                        <a href="#" class="bk-avatar">
                            <img src="@Url.Content("~/Assets/img/avatar.jpg")" alt="" class="img-circle bk-img-60 bk-border-danger bk-border-2x bk-border-darken">
                        </a>
                    </div>
                    <div class="col-xs-9 bk-vcenter">
                        <h5 class="bk-fg-danger bk-margin-off-bottom">Rose Lady</h5>
                        <p>
                            Morbi interdum posuere ultricies. Aliquam sit amet neque nisi. Etiam in iaculis lectus.
                        </p>
                    </div>
                </div>
                <div class="row">
                    <hr class="bk-margin-off">
                    <div class="col-xs-3 bk-vcenter text-center bk-padding-10">
                        <a href="#" class="bk-avatar">
                            <img src="@Url.Content("~/Assets/img/avatar.jpg")" alt="" class="img-circle bk-img-60 bk-border-success bk-border-2x bk-border-darken">
                        </a>
                    </div>
                    <div class="col-xs-9 bk-vcenter">
                        <h5 class="bk-fg-success bk-margin-off-bottom">Jhon Doe</h5>
                        <p>
                            Morbi interdum posuere ultricies. Aliquam sit amet neque nisi. Etiam in iaculis lectus.
                        </p>
                    </div>
                </div>
            </div>
            <div class="panel-body bk-bg-very-light-gray bk-padding-top-5 bk-padding-bottom-5 ">
                <div class="row">
                    <div class="col-xs-6">
                        <a href="#" class="bk-fg-textcolor"><small><i class="fa fa-angle-left"></i> 上一页</small></a>
                    </div>
                    <div class="col-xs-6 text-right">
                        <a href="#" class="bk-fg-textcolor"><small>下一页 <i class="fa fa-angle-right"></i></small></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    //创建和初始化地图函数：
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件

    }

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
        else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
        $('#hid_Latitude').val(position.coords.latitude);
        $('#hid_Longitude').val(position.coords.longitude);
        var point = new BMap.Point(position.coords.longitude, position.coords.latitude)
    }

    //创建地图函数：
    function createMap() {

        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        //var point = new BMap.Point(116.395645, 39.929986);//定义一个中心点坐标
        //alert(document.getElementById('hid_Longitude').value, document.getElementById('hid_Latitude').value);
        var point = new BMap.Point( document.getElementById('hid_Longitude').value,document.getElementById('hid_Latitude').value);//定义一个中心点坐标

        map.centerAndZoom(point, 12);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局

    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
        map.addControl(ctrl_sca);
    }
    getLocation();
    //initMap();//创建和初始化地图

    setTimeout(function () { initMap(); }, 2000);

</script>
